<template>
  <div id="event"></div>
</template>

<script>
import * as PIXI from 'pixi.js'
export default {
  name: 'event',
  mounted() {
    let _this = this
    this.$nextTick(() => {
      _this.initPixi()
    })
  },
  methods: {
    initPixi() {
      const options = {
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: 0x1099bb,
        resolution: window.devicePixelRatio || 1,
        antialias: true
      }
      // 创建应用
      const app = new PIXI.Application(options)
      // 将应用画布添加到DOM中
      document.querySelector('#event').appendChild(app.view)

      // 创建纹理
      const texture = PIXI.Texture.from('/textures/arrow.png')

      // 创建精灵
      const sprite = new PIXI.Sprite(texture)
      // 设置精灵锚点
      sprite.anchor.set(0.5, 0.5)
      // 设置位置
      sprite.x = app.screen.width / 2
      sprite.y = app.screen.height / 2
      // 设置精灵旋转-45°
      sprite.rotation = Math.PI / -4
      // 设置精灵缩放
      sprite.scale.set(2, 2)
      // 设置精灵透明度
      sprite.alpha = 0.5
      // 添加到画布
      app.stage.addChild(sprite)

      // ticker 实现动画
      app.ticker.add((delta) => {
        sprite.rotation += 0.01 * delta
      })

      // 为精灵添加交互事件
      sprite.interactive = true // 使精灵对象可以点击
      sprite.on('click', () => {
        alert('点击了')
      })

      // 鼠标进入
      sprite.on('pointerover', () => {
        console.log('鼠标移入 :>> ')
        sprite.alpha = 0.5
      })
      sprite.on('pointerout', () => {
        console.log('鼠标移出 :>> ')
        sprite.alpha = 1
      })

      // 绘制矩形
      const rect = new PIXI.Graphics()
      rect.beginFill(0xff0000)
      rect.drawRect(0, 0, 100, 100)
      rect.endFill()
      rect.x = 100
      rect.y = 100
      app.stage.addChild(rect)
      // 给矩形添加点击事件
      rect.interactive = true
      rect.on('click', () => {
        console.log('点击矩形 :>> ')
      })
    }
  }
}
</script>
<style>
#tag {
  width: 100%;
  height: 100%;
}
</style>
